<template>
  <!-- 徐妹 -->
  <div>
    <!-- 卡片视图区 -->
    <el-card>
      <p v-if='$route.query.name'>学科管理 > {{ $route.query.name }} >标签管理</p>

      <el-form :inline="true">
        <el-form-item label="目录名称">
          <el-input v-model="queryInfo.tagName"> </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="启用" value="shanghai"></el-option>
            <el-option label="禁用" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearInput3">清除</el-button>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-form-item>
        <el-form-item class="add">
          <el-button type="success" icon="el-icon-edit" @click="addXueke">新增学科</el-button>
          <el-button type="text" @click="router_tag" v-if="$route.query.name" class='right-btn'>←&nbsp;&nbsp;返回学科
          </el-button>

        </el-form-item>
      </el-form>
      <!-- 数据条 -->
      <el-alert :title="'数据一共'+`${total}`+'条'" type="info">
      </el-alert>
      <!-- table表格 -->
      <el-table :data="mululist" style="width: 100%">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科">
        </el-table-column>
        <el-table-column prop="tagName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者">
        </el-table-column>
        <el-table-column prop="addDate" label="创建时间" width="200px">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <el-link v-if="scope.row.state === 0">禁用</el-link>
            <el-link v-else>启用</el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link v-if='scope.row.state===1' type="primary" :underline="false" @click='open(scope.row)'>禁用
            </el-link>
            <el-link v-else type="primary" :underline="false" @click='open(scope.row)'>启用</el-link>
            <el-link type="primary" :underline="false" @click="xiuForm(scope.row)"
              :disabled="scope.row.state===1 ? true:false">修改</el-link>
            <el-link type="primary" :underline="false" @click="remove(scope.row.id)"
              :disabled="scope.row.state===1 ? true:false">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加弹框 -->
    <el-dialog title="新增目录" :visible.sync="addBdialogVisible" width="30%">
      <el-form :model="eddForm" ref="ruleFormRef" :rules="addRules">
        <el-form-item label="所属学科" label-width="80px" prop="subjectID">
          <el-select v-model="eddForm.subjectID" placeholder="请选择">
            <el-option v-for="item in mululist" :key="item.id" :label="item.subjectName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="eddForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addBdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="BdialogVisible">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改弹框 -->
    <el-dialog title="修改目录" :visible.sync="xiuBdialogVisible" width="30%">
      <el-form :model="eddForm" :rules="addRules" ref="ruleFormRef">
        <el-form-item label="所属学科" label-width="80px">
          <el-select v-model="eddForm.subjectID" placeholder="请选择">
            <el-option v-for="item in mululist" :key="item.id" :label="item.subjectName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="eddForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xiuBdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureBdialogVisible">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page"
      :page-sizes="[5, 10, 20, 50]" :page-size="queryInfo.pagesize" layout="total,  prev, pager,next,sizes,jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

import { list, update, remove, add, changeState } from '../../api/hmmm/tags.js'
export default {
  name: 'tags',

  data () {
    return {

      addBdialogVisible: false,
      xiuBdialogVisible: false,
      eddForm: {
        id: '',
        tagName: '',
        subjectID: ''

      },
      value: '',
      routerList: {
        value: '',
        label: ''
      },
      addRules: {
        tagName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      // 数据列表
      mululist: [],
      // 总条数
      total: 5,
      queryInfo: {
        tagName: null,
        page: 1,
        pagesize: 10,
        subjectID: null,
        state: null
      },
      form: {
        region: ''
      }
    }
  },

  methods: {
    addXueke () {
      this.addBdialogVisible = true
      this.$refs.ruleFormRef.resetFields()
    },
    // 禁用和启用相互转换
    async open (row) {
      row.state = row.state === 1 ? '0' : '1'
      await changeState(row)
      this.$message.success('操作成功')
      this.getList()
    },

    // 点击路由跳转到主页
    router_tag () {
      this.$router.push('/subjects/list')
    },
    // 新增弹框 确定数据
    async BdialogVisible () {
      try {
        const { data: res } = await add(this.eddForm)
        console.log(res)
        this.$message.success('添加成功')
        this.addBdialogVisible = false
        this.getList()
      } catch (error) {
        this.$message.error('添加失败')
      }
    },

    // 删除数据
    async remove (id) {
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(result)
      if (result !== 'confirm') { return this.$message.info('已取消') }
      try {
        if (this.mululist.length === 1) {
          this.queryInfo.page = this.queryInfo.page === 1 ? 1 : this.queryInfo.page - 1
        }
        const { data: res } = await remove({ id })
        console.log(res)
        this.$message.success('删除成功')
        this.getList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },

    // 需要修改的数据
    async sureBdialogVisible (row) {
      row = await update(this.eddForm)
      this.$message.success('成功了')
      this.xiuBdialogVisible = false
      this.getList()
    },
    // 修改弹框获取行内数据
    xiuForm (row) {
      this.xiuBdialogVisible = true
      console.log(row)
      this.eddForm = row
      console.log(this.eddForm)
    },

    // 清空input框
    clearInput3 () {
      this.values = ''
      this.queryInfo.tagName = ''
      this.form.region = ''
      this.getList()
    },
    // 分页效果
    handleSizeChange (size) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = size
      this.getList()
    },
    handleCurrentChange (page) {
      // console.log(`当前页: ${val}`)
      this.queryInfo.page = page
      this.getList()
    },
    // 获取列表数据数据
    async getList () {
      const { data } = await list(this.queryInfo)
      console.log(data)
      this.mululist = data.items
      this.total = data.counts
    },
    onSubmit () {
      console.log('submit!')
    }
  },
  created () {
    this.getList()
    console.log(this.$route)
  }

}

</script>

<style scoped lang='less'>
.add {
  float: right;
}
.el-input {
  width: 200px;
  margin-right: 40px;
}
.el-link {
  padding-left: 10px;
}
.el-pagination {
  float: right;
}
</style>
